@SCROLLBAR_SIZE_THIN: 8px;
@SCROLLBAR_SIZE: 15px;

.dx-scrollable-content {
    -webkit-transform: none;
}

.dx-scrollable-scroll {
    padding: 2px;
    background-color: transparent;
    opacity: 1;
    overflow: hidden;
    .transition(~"opacity 0s linear");
}

.dx-scrollable-scroll.dx-state-invisible {
    opacity: 0;
    .transition(~"opacity .5s linear 1s");
}

.dx-scrollable-scroll-content {
    width: 100%;
    height: 100%;
    background-color: @scrollable-scroll-bg;
    box-shadow: 0 0 0 1px @scrollable-scroll-shadow-color;
}


.dx-scrollbar-hoverable {
    background-color: @scrollable-scrollbar-bg;

    &.dx-state-hover, &.dx-scrollable-scrollbar-active {
        background-color: @scrollable-scrollbar-active-bg;
    }

    &.dx-scrollable-scrollbar-active .dx-scrollable-scroll-content {
        background-color: @scrollable-scroll-active-bg;
    }

    .dx-scrollable-scroll.dx-state-invisible {
        opacity: 1;
        .dx-scrollable-scroll-content {
            background-color: transparent;
            background-color: rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 1px transparent;
        }
    }
}

.dx-scrollbar-vertical {
    .dx-scrollable-scroll {
        float: right;
        width: @SCROLLBAR_SIZE_THIN;
    }

    &.dx-scrollbar-hoverable {
        width: @SCROLLBAR_SIZE_THIN;
        .transition(~"width .2s linear .15s, background-color .2s linear .15s");

        .dx-scrollable-scroll {
            .transition(~"background-color .5s linear 1s, width .2s linear 150ms");

            .dx-scrollable-scroll-content {
                .transition(~"box-shadow .15s linear .15s, background-color .15s linear .15s");
            }

            &.dx-state-invisible {
                .transition(~"background-color .5s linear 1s, width .2s linear .15s");

                .dx-scrollable-scroll-content {
                    .transition(~"box-shadow .5s linear 1s, background-color .5s linear 1s");
                }
            }
        }

        &.dx-state-hover, &.dx-scrollable-scrollbar-active {
            width: @SCROLLBAR_SIZE;

            .dx-scrollable-scroll {
                width: @SCROLLBAR_SIZE;
            }
        }
    }
}

.dx-scrollbar-horizontal {
    .dx-scrollable-scroll {
        height: @SCROLLBAR_SIZE_THIN;
    }

    &.dx-scrollbar-hoverable {
        height: @SCROLLBAR_SIZE_THIN;
        .transition(~"height .2s linear .15s, background-color .2s linear .15s");

        .dx-scrollable-scroll {
            .transition(~"background-color .5s linear 1s, height .2s linear .15s");

            .dx-scrollable-scroll-content {
                .transition(~"box-shadow .15s linear .15s, background-color .15s linear .15s");
            }

            &.dx-state-invisible {
                .transition(~"background-color .5s linear 1s, height .2s linear .15s");

                .dx-scrollable-scroll-content {
                    .transition(~"box-shadow .5s linear 1s, background-color .5s linear 1s");
                }
            }
        }

        &.dx-state-hover, &.dx-scrollable-scrollbar-active {
            height: @SCROLLBAR_SIZE;

            .dx-scrollable-scroll {
                height: @SCROLLBAR_SIZE;
            }
        }
    }
}

.dx-scrollable-scrollbars-alwaysvisible {
    &.dx-scrollable-vertical,
    &.dx-scrollable-both {
        .dx-scrollable-content {
            padding-right: @SCROLLBAR_SIZE_THIN;

            .dx-rtl&,
            .dx-rtl & {
                padding-right: 0;
                padding-left: @SCROLLBAR_SIZE_THIN;
            }
        }
    }

    &.dx-scrollable-horizontal,
    &.dx-scrollable-both {
        .dx-scrollable-content {
            padding-bottom: @SCROLLBAR_SIZE_THIN;
        }
    }
}

.dx-scrollable-customizable-scrollbars {
    /*IE*/
    -ms-scrollbar-base-color: @scrollable-scrollbar-custom-bg;
    -ms-scrollbar-arrow-color: @scrollable-scrollbar-arrow-custom-bg;
    -ms-scrollbar-track-color: @scrollable-scrollbar-custom-bg;

    /*Chrome and Safari*/
    ::-webkit-scrollbar:horizontal {
        height: 19px;
    }

    ::-webkit-scrollbar:vertical {
        width: 19px;
    }

    ::-webkit-scrollbar {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: @scrollable-scrollbar-thumb-bg;
        border-right: 2px solid transparent;
        border-left: 1px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    ::-webkit-scrollbar-button {
        background-color: transparent;
    }

    ::-webkit-scrollbar-button:horizontal:decrement {
        background: @sctollbar-button-horizontal-decrement-bg;
        background-position: center;
    }

    ::-webkit-scrollbar-button:horizontal:increment {
        background: @sctollbar-button-horizontal-increment-bg;
        background-position: center;
    }

    ::-webkit-scrollbar-button:vertical:decrement {
        background: @sctollbar-button-vertical-decrement-bg;
        background-position: 3px 5px;
    }

    ::-webkit-scrollbar-button:vertical:increment {
        background: @sctollbar-button-vertical-increment-bg;
        background-position: 3px 5px;
    }
}

.dx-rtl .dx-scrollable,
.dx-rtl.dx-scrollable {

    .dx-scrollable-scroll {
        float: left;
    }
}
